<template>
  <div class="manage-workflow">
    <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="100px">
      <el-form-item label="工作流名称:">
        <el-input v-model="searchForm.dag_name"></el-input>
      </el-form-item>
      <el-form-item label="计划时间:">
        <el-date-picker
          v-model="planTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="searchForm.state" placeholder="请选择" clearable>
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运行类型:">
        <el-select v-model="searchForm.run_type" placeholder="请选择" clearable>
          <el-option
            v-for="item in runTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="workflowList" style="width: 100%">
      <el-table-column prop="dag_id" label="DAG_ID"></el-table-column>
      <el-table-column prop="workflow_name" label="工作流名称"></el-table-column>
      <el-table-column prop="run_type" label="运行类型"></el-table-column>
      <el-table-column prop="execution_date" label="计划时间">
        <template slot-scope="scope">
          {{ scope.row.execution_date | format }}
        </template>
      </el-table-column>
      <el-table-column prop="start_date" label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.start_date | format }}
        </template>
      </el-table-column>
      <el-table-column prop="end_date" label="结束时间">
        <template slot-scope="scope">
          {{ scope.row.end_date | format }}
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="耗时"></el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-view"
            circle
            size="mini"
            @click="showDetail(scope.row)"
          ></el-button>
          <el-popconfirm
            v-if="scope.row.state == 'failed'"
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="确定重试吗？"
            @onConfirm="retryFailed(scope.$index, scope.row)"
          >
            <el-button v-if="scope.row.run_type !== 'backfill'" slot="reference" size="mini" icon="el-icon-refresh"
                       type="success" circle></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right; margin-top: 8px">
      <el-pagination
        :total="totalCount"
        :current-page="pageParams.page"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 详情展示 -->
    <task-detial ref="detail"></task-detial>
  </div>
</template>
<script>
import TaskDetial from "../../data/components/task-detail";

export default {
  name: "ManageWorkflow",
  components: { TaskDetial },
  data() {
    return {
      planTime: null,
      pageParams: {
        page: 1,
        page_size: 10
      },
      totalCount: 0,
      searchForm: {
        dag_name: "",
        state: "",
        run_type: "",
        execution_date_from: "",
        execution_date_to: ""
      },
      statusList: [
        {
          id: "1",
          label: "failed",
          value: "failed"
        },
        {
          id: "2",
          label: "success",
          value: "success"
        },
        {
          id: "3",
          label: "running",
          value: "running"
        }
      ],
      runTypeList: [],
      workflowList: []
    };
  },
  created() {
    this.initData();
    this.$http.manageworkflow.getRunTypeList().then(res => {
      this.runTypeList = res;
    });
  },
  methods: {
    showDetail(row) {
      this.$refs.detail.showDetail(row);
    },
    search() {
      this.pageParams = {
        page: 1,
        page_size: 10
      };
      this.initData();
    },
    handleSizeChange(val) {
      this.pageParams.page_size = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pageParams.page = val;
      this.initData();
    },
    initData() {
      if (this.planTime) {
        this.searchForm.execution_date_from = new Date(this.planTime[0]).getTime();
        this.searchForm.execution_date_to = new Date(this.planTime[1]).getTime();
      } else {
        this.searchForm.execution_date_from = "";
        this.searchForm.execution_date_to = "";
      }

      this.$http.manageworkflow
        .getWorkflowList({
          ...this.pageParams,
          ...this.searchForm,
          project_id: this.$route.query.project_id
        })
        .then(res => {
          this.workflowList = res.items;
          this.totalCount = res.total;
        });
    },
    downLoad(row) {
      this.$http.task.downloadTaskLog({
        hostname: row.hostname,
        operator: row.operator,
        start: -1000
      }).then(res => {
        const blob = new Blob([res], { type: "application/octet-stream" });
        let dom = document.createElement("a");
        let url = window.URL.createObjectURL(blob);
        dom.href = url;
        dom.download = decodeURI(row.hostname + ".log");
        dom.style.display = "none";
        document.body.appendChild(dom);
        dom.click();
        dom.parentNode.removeChild(dom);
        window.URL.revokeObjectURL(url);
      });
    },
    retryFailed(index, row) {
      this.$http.workflow
        .retryFailed({
          dag_id: row.dag_id,
          execution_date: row.execution_date,
          project_id: row.execution_date
        })
        .then(res => {
          this.initData();
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.manage-workflow {
  .workflow-header {
    float: right;
    margin-bottom: 8px;
  }

  /deep/ .el-table__header-wrapper .el-table__header th {
    background-color: #f8f8f9;
    color: #515a6e;
    font-size: 14px;
    font-weight: 500;
  }
}
</style>
